<template>
  <div>
    <Card>
      <div style="text-align:center; width: 100%;">
        <h3 style="font-size: 16px;">面试官</h3>
      </div>
    </Card>

    <div style="text-align:center; margin: 10px">
      <Input v-model="searchName" placeholder="请输入姓名搜搜..." style="width: 170px;" />
      <span @click="handleSearch" style="margin: 0 10px;"><Button type="primary" size="small" icon="search">搜索</Button></span>
      <Button @click="handleCancel" type="ghost" size="small">取消</Button>
    </div>
    <div style="text-align:center; margin: 10px">
      <Table :columns="columnList" :data="dataList"></Table>
    </div>

  </div>
</template>
<script>
  import interviewApi from '../api/axios/interviewApi'

  export default {
    data () {
      return {
        searchName: '',
        columnList :[
          {
            title: '序号',
            type: 'index',
            align: 'center',
            sortable: true
          },
          {
            title: '姓名',
            key: 'user_name',
            align: 'center',
            sortable: true
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.handleInterview(params.row, params.index)
                    }
                  }
                }, '面试')
              ]);
            }
          }
        ],
        dataList :[],
        initDataList :[]
      }
    },
    computed: {
      getInterviewId (){
        return this.$store.getters['auth/getInterviewId'];
      }
    },
    methods: {
      handleSearch (){
        this.dataList = this.initDataList;
        this.dataList = this.search(this.dataList, this.searchName);
      },
      handleCancel (){
        this.dataList = this.initDataList;
      },
      search (data, name) {
        data = data.filter(item => {
          return item.user_name.indexOf(name) > -1;
        });
        return data;
      },
      handleInterview (row, index){
        this.$router.push({ path: `/interview/${row.interviewRecordId}/${row.userId}`});
      }
    },
    created (){
      let that = this;
      interviewApi.getUsersByInterviewId({
        interviewId: that.getInterviewId
      },{
        success (res) {
          if (res.data.status === 200) {
            that.dataList = res.data.data;
            that.initDataList = res.data.data;

          }else {
            console.log("getUsersByInterviewId 请求失败" + res.data);
          }
        }
      })
    }
  }
</script>
<style>

</style>
